<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07.margin合并</title>
    <style>
        /*
         bfc 盒子塌陷 
            父子盒子嵌套  为子盒子设置了margin-top 会影响父盒子
              1、 为父盒子设置上边框
              2.  在在父盒子上设置一个overflow属性 auto hidden
              
                 overflow 容器溢出的处理方式 
                    auto  文本溢出添加滚动条  不溢出 没有滚动条
                    hidden 表示 文本溢出直接隐藏

        */
         .a {
             width: 500px;
             height: 500px;
             background-color: red;
             box-sizing: border-box;
             /* border-top: 1px solid; */
             /* overflow:auto; */
             overflow:hidden;
             /* padding-left: 100px;
             padding-top: 100px; */
         }
         .b {
            width: 300px;
             height: 300px;
             background-color:yellow;
             margin-left: 100px;
             margin-top: 100px;
         }
    </style>
</head>
<body>

    <div class="a">
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxxxxxx
        <!-- <div class="b">

        </div> -->
    </div>
    
</body>
</html>